const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      autoprefixer = require('gulp-autoprefixer'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      del = require('del'),
      connect = require('gulp-connect'),
      sass = require('gulp-sass'),
      // 引入一个包的同时解构出来
      { createProxyMiddleware } = require('http-proxy-middleware')

// 把所有任务相关的路径做一个集中管理
const paths = {
  web:{
    src: 'src/web/**/*.html',
    dest: 'dist/web'
  },
  html: {
    src: 'src/**/*.html',
    dest: 'dist'
  },
  css: {
    src: 'src/css/**/*.scss',
    dest: 'dist/css'
  },
  js: {
    src: 'src/js/**/*.js',
    dest: 'dist/js'
  },
  imgs: {
    src: 'src/img/**/*',
    dest: 'dist/img'
  },
  libs: {
    src: 'src/libs/**/*',
    dest: 'dist/libs'
  },
  ico: {
    src: 'src/favicon.ico',
    dest: 'dist'
  }
}

const clean = () => del('dist')

// 制定html任务：对html文件完成压缩放入dist目录里
const html = () => {
  // ** 代表所有目录，*代表所有文件
  return gulp.src(paths.html.src)
    .pipe(htmlmin({
      removeComments: true, // 清除HTML注释
      collapseWhitespace: true, // 压缩HTML
      collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
      minifyJS: true, // 压缩页面JS
      minifyCSS: true // 压缩页面CSS
    }))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())
}
const web = () => {
  // ** 代表所有目录，*代表所有文件
  return gulp.src(paths.web.src)
    .pipe(htmlmin({
      removeComments: true, // 清除HTML注释
      collapseWhitespace: true, // 压缩HTML
      collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
      minifyJS: true, // 压缩页面JS
      minifyCSS: true // 压缩页面CSS
    }))
    .pipe(gulp.dest(paths.web.dest))
    .pipe(connect.reload())
}
// 制定css任务：先加上兼容性前缀，压缩css文件
const css = () => {
    return gulp.src(paths.css.src)
      .pipe(sass())
      .pipe(autoprefixer({
        cascade: false
      }))
      .pipe(cleanCss())
      .pipe(gulp.dest(paths.css.dest))
      .pipe(connect.reload())
}

// 制定js任务：先ES6转ES5，再压缩混淆js代码
const js = () => {
    return gulp.src(paths.js.src)
        .pipe(babel({
        presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(paths.js.dest))
        .pipe(connect.reload())
}
// 制定imgs任务: 移动图片
const imgs = () => gulp.src(paths.imgs.src).pipe(gulp.dest(paths.imgs.dest)) 

// 制定libs任务: 移动文件
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest)) 

const server = () => {
    connect.server({
        root: 'dist', // 项目根路径是dist
        livereload: true, // 服务器支持热更新
        port: 2333, // 配置端口号2333
        // 中间件：函数返回一个数组，数组配置跨域代理
        middleware () {
            return [
              // 将以/api为开头的请求代理到域
              createProxyMiddleware('/api', {
                target: 'http://www.xiongmaoyouxuan.com',
                changeOrigin: true // 修改源
              })
            ]
        }
    })
}
// ico任务：把ico图标移动到dist
const ico = () => gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))

// watch任务：监听一些文件的修改，一旦被修改了就自动重启对应的任务
const watch = () => {
    gulp.watch(paths.html.src, html)
    gulp.watch(paths.css.src, css)
    gulp.watch(paths.js.src, js)
}


// module.exports = {
//     html,
//     css,
//     js
// }

// 只导出default这一个任务,这一任务里异步执行了其他所有任务
// parallel 异步执行任务
// serise   同步执行任务
module.exports.default = gulp.series(clean, gulp.parallel(web,html,js,css,imgs,libs,server,watch,ico))
